<script>
import axios from "axios";
import comMixin from "./comMixin.js";
export default {
  mixins: [comMixin],
  props: {
    message: {
      type: String,
    },
  },
  data() {
    return {
      isLoad: false,
      value: "",
    };
  },
  methods: {
    btnTrigger() {
      if (this.isLoad) return;
      this.$refs.uploadInput.click();
    },

    Upload(src) {
      debugger;
      this.isLoad = true;
      var formData;
      /* fromData类型 */
      formData = new FormData();
      formData.append("upfile", src);
      formData.append("tag", window.siteHeaders.site_tag);
      formData.append("action", "uploadimage");
      axios({
        method: "post",
        url: window.siteHeaders.staticURL + "/action_upload.php",
        data: formData,
      })
        .then((res) => {
          if (res.data.state === "SUCCESS") {
            this.$alert({ center: $AONE_LAN.uploadSuccess, type: "success" });
            this.formData[this.prop] =
              window.siteHeaders.staticURL + res.data.url;
            this.$emit("upload", this.formData[this.prop]);
          } else {
            this.$alert({
              center: $AONE_LAN.uploadFailed + " - " + res.data.state,
              type: "fail",
            });
          }
          this.isLoad = false;
        })
        .catch((err) => {
          this.$alert({
            center: $AONE_LAN.uploadFailed + " - " + err,
            type: "fail",
          });
          this.$emit("upload");
          this.isLoad = false;
        });
    },
    uploadss(e) {
      let fileData = e.srcElement.files[0];
      this.Upload(fileData);
    },
    renderUploadBtn() {
      if (this.isLoad) {
        return <i class="el-icon-loading" />;
      } else if (this.message) {
        return <span class="message">{this.message}</span>;
      } else {
        return [
          <img v-src="sc.svg" class="uploadimg" />,
          <span>{$AONE_LAN.upload}</span>,
        ];
      }
    },
  },
  render() {
    return (
      <el-input
        class="aoneui-upload"
        v-model={this.formData[this.prop]}
        placeholder={this.placeholderSync}
        clearable={true}
      >
        <template slot="prepend">
          <input
            type="file"
            value={this.value}
            style="display:none;"
            ref="uploadInput"
            onChange={(event) => this.uploadss(event)}
          />
        </template>
        <template slot="append">
          <div class="downloadimgbox" onClick={this.btnTrigger}>
            {this.renderUploadBtn()}
          </div>
        </template>
      </el-input>
    );
  },
};
</script>
<style lang="scss" scoped>
.aoneui-upload {
  /deep/ {
    .el-input__inner {
      height: 32px;
      line-height: 32px;
    }
    .el-input-group__prepend {
      display: none;
    }
    .el-input-group__append {
      padding: 0 10px;
    }
  }
  .downloadimgbox {
    color: #61c2fb;
    width: max-content;
    cursor: pointer;
  }
}
</style>